<template>
  <div class="query-generator">
    <relation-wrapper
      :relations="relations"
      :level="0"
      level-id="0"
      ref="wrapper"
      @activate="handleActivate"
      @beforeActivate="handleBeforeActivate"
      :active-index="activeIndex"
      :active-level="activeLevel"
      :activeLevelId="activeLevelId"
      :isLog="isLog"
    ></relation-wrapper>
  </div>
</template>

<script>
import RelationWrapper from "./RelationWrapper.vue";
export default {
  name: "QueryGenerator",
  components: {
    RelationWrapper,
  },
  props: {
    relations: {
      type: Array,
      default: () => [
        "OR",
        [
          { fieldName: "", operator: "EQ", value: "" },
          ["AND", [{ fieldName: "", operator: "EQ", value: "" }]],
        ],
      ],
    },
    isLog:{
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      activeLevel: -1,
      activeIndex: -1,
      activeLevelId: "",
    };
  },
  methods: {
    convert() {
      // 转换成后端数据
    },
    createRelation(relation, oldRelations) {
      this.$refs.wrapper.createRelation(relation, oldRelations);
    },
    handleActivate(level, levelId, index) {
      this.activeLevel = level;
      this.activeIndex = index;
      this.activeLevelId = levelId;
    },
    handleBeforeActivate() {
      this.$refs.wrapper.deleteUnhandledBeforeAdd();
    }
  },
};
</script>

<style lang="scss" scoped>
.query-generator {
  overflow-x: scroll;
}
</style>